<template>
	<view class="container">
		<u-grid :col="3" :border="false">
			<u-grid-item v-for="(item,index) in list" class="item" :key="index" @click="itemClick(item)">
				<u-icon class="icon" name="camera-fill" :size="100" :color="appTheme.checkColor"></u-icon>
				<view class="name">{{item.name}}</view>
			</u-grid-item>
		</u-grid>
		
		<u-empty class="noContent" v-if="list.length === 0" text="暂时没有摄像头哦～"  mode="list"></u-empty>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	import { getLiveRoom, getCameraList, openLive, openLiveByParent } from '@/api/common.js'
	import appMixin from '@/mixins/app.js'
	export default {
		mixins: [appMixin],
		data() {
			return {
				list: [],
			}
		},
		computed: {
			...mapState({
				appType: state => state.app.appType,
			}),
		},
		onLoad() {
			this.getCamera();
		},
		methods: {
			getCamera() {
				let getF = getLiveRoom;
				let params = {};
				if (this.appType === 'app-tch' || this.appType === 'mp-tch') {
					getF = getCameraList;
					params = {
						pageSize: 99,
						pageNum: 0
					}
				}
				getF(params).then(res => {
					console.log(res);
					if (this.appType === 'app-tch' || this.appType === 'mp-tch') {
						this.list = res.data.content;
					} else {
						this.list = res.data;
					}
				})
			},
			
			itemClick(item) {
				this.openLive(item);
			},
			
			openLive(item) {
				let getF = openLiveByParent;
				if (this.appType === 'app-tch' || this.appType === 'mp-tch') {
					getF = openLive;
				}
				uni.showLoading({
					title: '首次加载时间较长，请稍等'
				})
				getF({ liveRoomId: item.id }).then(res => {
					if (res.data === 1) {
						uni.hideLoading()
						this.playLive(item)
					} else {
						uni.showLoading({
							title: '首次加载时间较长，请稍等'
						})
						setTimeout(() => {
							uni.hideLoading()
							this.playLive(item)
						}, 1000 * 6);
					}
				})
			},
			
			playLive(item) {
				console.log(item)
				this.$u.route({
					url: '/pages_base/common/player/player',
					params: {
						url: encodeURIComponent(item.url),
						controls: 'false',
						id: item.id
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	
	.container{
		padding: 30rpx;
	}
	
	.item{
		// display: flex;
		flex-direction: column;
		
		.icon{
			
		}
		
		.name{
			margin-top: 10rpx;
			font-size: 26rpx;
			color: $app-font-color;
		}
	}

</style>
